<template>
  <div class="grey" ref="grey">
    <div class="btn">
      <el-button @click="btnGrey" type="info">变灰色</el-button>
      <el-button @click="btnBright" type="success">变亮</el-button>
    </div>
    <div class="list">
      <div class="li-l">
        <img src="https://pic.rmb.bdstatic.com/bjh/news/1d08cd4d1aaede04f5575ef56cfa38b3.jpeg" alt="">
      </div>
      <div class="li-r">
        <img src="https://pic.rmb.bdstatic.com/bjh/news/82daaba558bdcf6e78551d68c8e39d70.png" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  methods: {
    btnGrey(){
      this.$refs.grey.style.filter = 'grayscale(1)'
    },
    btnBright(){
      this.$refs.grey.style.filter = 'grayscale(0)'
    }
  }
}
</script>

<style scoped>
.list {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}
.li-l {
  height: 300px;
}
.li-l img {
  height: 100%;
}
.li-r {
  height: 300px;
}
.li-r img {
  height: 100%;
}
</style>